.index {
    width: 100vw;
    height: 100vh;
    background: linear-gradient(to bottom,#C0EDED ,rgb(250,250,250));
    .mapBox {
        width: 96%;
        height: 80%;
        background-color: #fff;
        border-radius: 10px;
        box-sizing: border-box;
        padding: 10px;
        margin-left: 2%;
        .tabBar {
            width: 100%;
            height: 15%;
            background-color: #fff;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            box-sizing: border-box;
            padding-top: 24px;
            .tabItem {
                width: 200px;
                height: 100px;
                box-sizing: border-box;
                padding-top: 70px;
                text-align: center;
                font-size: 28px;
                line-height: 1;
                font-weight: bold;
                color: #999;
                &:nth-child(1) {
                    background: url('../../images/person.png') no-repeat top center;
                    background-size: 60px 60px;
                }
                &:nth-child(2) {
                    background: url('../../images/order.png') no-repeat top center;
                    background-size: 60px 60px;
                }
                &:nth-child(3) {
                    background: url('../../images/kefu.png') no-repeat top center;
                    background-size: 60px 60px;
                }
            }
        }
    }
    .scanCode{
        width: 90%;
        height: 100px;
        border-radius: 50px;
        background-color: #C0EDED;
        box-sizing: border-box;
        padding-left: 40%;
        line-height: 100px;
        color: #333;
        margin-top: 50px;
        margin-left: 5%;
        background-image: url('../../images/scan.png');
        background-repeat: no-repeat;
        background-position:  200px center;
        background-size: 50px 50px;
        box-shadow: 0 0 10px darkgray;

    }
}